<!--
 @Description 咨询样式一
 @author chenTeng
 @date 2022/11/2
-->

<template>
  <div :style="{ 'margin-top': top,'padding': `0 ${spacing}`}" class="notice-bar-one">
    <van-notice-bar
      mode="link"
      :left-icon="icon"
      background="#fff"
      :scrollable="false"
    >
      <van-swipe
        vertical
        class="notice-swipe"
        :autoplay="delayTime"
        :show-indicators="false"
      >
        <van-swipe-item
          v-for="item in list"
          :key="item.id"
          @click="toDetail(item)"
        >{{ item.mainTitle }}</van-swipe-item>
      </van-swipe>
    </van-notice-bar>
  </div>
</template>
<script>
import laba4red from '../../images/base/laba4red.png'
import mixins from './../mixins'
import noticeBarMixins from '@/components/CustomPage/apps/widget/noticeBar/mixins'
export default {
  name: 'NoticeBarOne',
  mixins: [mixins, noticeBarMixins],
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [],
      defaultList: [
        {
          mainTitle: '*********************',
          id: '1'
        },
        {
          mainTitle: '*********************',
          id: '2'
        }
      ],
      icon: laba4red
    }
  },
  async created() {
    if (this.isInitData) {
      await this.initData()
    } else {
      this.list = this.defaultList
    }
  },
  methods: {
    setData(result) {
      this.list = result.dataList.data.rows
    }
  }
}
</script>

<style lang='scss' >
@import "@/styles/utility/rem.scss";
.notice-bar-one {
  width: rem(750);
  .van-notice-bar {
    width: 100%;
    border-radius: rem(16);
    padding-right: rem(20);
  }
  .van-notice-bar__right-icon {
    color: #eb523c;
  }
  .van-notice-bar__left-icon {
    color: #eb523c;
  }
  .notice-swipe {
    height: 40px;
    line-height: 40px;
    .van-swipe-item {
      display: block;
      color: #000;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}
</style>
